<template>
  <div class="pager">
    <el-config-provider :locale="locale">
      <el-pagination background layout="prev, pager, next, total, sizes" :total="total" :page-size="limit"
                     :page-sizes="pageSizes" @current-change="onCurrentChange" @size-change="onSizeChange"/>
    </el-config-provider>
  </div>
</template>
<script setup>
import {locale} from '@/plugins/element.js'

const emits = defineEmits(['current-change', 'size-change'])
const props = defineProps(['page', 'total', 'limit', 'pageSizes'])
const onCurrentChange = (val) => {
  emits('current-change', val)
}
const onSizeChange = (val) => {
  emits('size-change', val)
}
</script>

<style scoped>
.pager {
  background-color: white;
  height: 66px;
  display: flex;
  justify-content: flex-end;
}
</style>
